<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-26 09:16:44
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 14:24:35
 * @FilePath: /vue3-cesium-plus/src/components/control/vc-search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="vc-pitch-control" :style="positionStyle" >
        
      <div class="vc-button" @click="onClickItem">

            <img v-if="!open" src="@/assets/svg/2d.svg" class="image" />
            <img v-else src="@/assets/svg/3d.svg" class="image" />
      </div>
    </div>
  </template>
  
<script setup lang="ts">
import {ref,onMounted} from 'vue'
import { positionProps, usePosition } from '../composables/usePosition'
import * as Cesium from 'cesium'
import { useCustomCesium } from "../useCustomCesium";
const {vueCesium} = useCustomCesium();
const props = defineProps({
    ...positionProps,
})
const { positionStyle } = usePosition(props)
const open = ref(false)
import {useCesiumCenter} from './useCesiumCenter'
const {getCenter} = useCesiumCenter()
import { useCesiumPitch } from "./useCesiumPitch";
const {pitchControl} = useCesiumPitch()

onMounted(()=>{
  setTimeout(() => {
    
    pitchControl(vueCesium.viewer)
    vueCesium.viewer.camera.changed.addEventListener(function() {
    // 获取当前俯仰角（弧度）
      const pitchRad = vueCesium.viewer.camera.pitch;
      // console.log("当前俯仰角（弧度）:", vueCesium.viewer.camera);
      // 转换为角度（可选）
      const pitchDeg = Cesium.Math.toDegrees(pitchRad);
      
      

      // // vueCesium.viewer.camera.direction
      // let cartographic =  Cesium.Ellipsoid.WGS84.cartesianToCartographic(vueCesium.viewer.camera.position);

      //   const longitude = Cesium.Math.toDegrees(cartographic.longitude);
      //           const latitude = Cesium.Math.toDegrees(cartographic.latitude);
      //           console.log("当前俯仰角:", longitude,latitude);
      
      if(pitchDeg < -40){
        open.value = false
      }else{
        open.value = true 
      }
  });

  }, 500);
})

const onClickItem = ()=>{

  
      //  let cartographic =  Cesium.Ellipsoid.WGS84.cartesianToCartographic(vueCesium.viewer.camera.position);
      //  const longitude = Cesium.Math.toDegrees(cartographic.longitude);
      //  const latitude = Cesium.Math.toDegrees(cartographic.latitude);

      // 
      

      let center = getCenter(vueCesium.viewer);
      if (center != null) {
      const location = Cesium.Cartesian3.fromDegrees(center.longitude, center.latitude,100) // 只需要经纬度
      // const heading = Cesium.Math.toRadians(20) // 水平旋转视口角度
      // const pitch = Cesium.Math.toRadians(-35) // 水平旋转视口角度
      // const range = 2500 // 相机距离目标地点高度
      // vueCesium.viewer?.camera.lookAt(location, new Cesium.HeadingPitchRange(heading, pitch, range))

        // const transform = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(center.longitude, center.latitude));
        // const heading = Cesium.Math.toRadians(50.0);
        // const pitch = Cesium.Math.toRadians(-20.0);
        // const range = 5000.0;
        // vueCesium.viewer.camera.lookAtTransform(transform, new Cesium.HeadingPitchRange(heading, pitch, range));  

      //  vueCesium.viewer.camera.setView({
      //     destination : Cesium.Cartesian3.fromDegrees(center.longitude, center.latitude, 5000.0),
      //     orientation : {
      //         direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
      //         up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
      //     }
      // });
        // Cesium.Cartesian3.fromDegrees(center.longitude, center.latitude, 5000);

        // vueCesium.viewer.camera.setView({
        //   destination: location,
        //   orientation: {
        //     heading: Cesium.Math.toRadians(0.0),
        //     pitch: Cesium.Math.toRadians(-10.0),
        //     roll: 0.0,
        //   },
        // })

        // var offset = new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-30), 0); // 设置偏移量和俯仰角
        // vueCesium.viewer.camera.setView({
        //     destination: location,
        //     orientation: {
        //         heading: Cesium.Math.toRadians(0), // 方位角
        //         pitch: Cesium.Math.toRadians(-30), // 俯仰角
        //         roll: 0 // 翻滚角
        //     },
        //     // endTransform: new Cesium.HeadingPitchRange()
        // });

      //   console.log('direction',vueCesium.viewer.camera.direction)
      //   console.log('position',vueCesium.viewer.camera.position)
      //   console.log('positionCartographic',vueCesium.viewer.camera.positionCartographic)
      //    let ar = Cesium.Ellipsoid.WGS84.cartesianToCartographic(vueCesium.viewer.camera.direction);
      //    console.log('positionCartographic = ar-',ar)
      //     const longitude = Cesium.Math.toDegrees(ar.longitude);
      //                    const latitude = Cesium.Math.toDegrees(ar.latitude);
      // console.log("longitude",longitude,latitude,ar.height)


        

        vueCesium.viewer.camera.flyTo({
          destination: location,
          orientation: {
            // heading: Cesium.Math.toRadians(20.0),
            pitch: Cesium.Math.toRadians(!open.value ? -10.0 : -90),
            roll: 0.0,
          },
        });
      }




      // const location = Cesium.Cartesian3.fromDegrees(longitude, latitude, 5000);
      //  vueCesium.viewer.camera.lookAt(
      //   location,
      //   new Cesium.HeadingPitchRange(0, pitch, 0)
      // );

    //   vueCesium.viewer.camera.flyTo({
    //     destination:Cesium.Cartesian3.fromDegrees(longitude,latitude,5000), // 目标位置
    //     orientation: {
    //         heading : Cesium.Math.toRadians(0),
    //         pitch : Cesium.Math.toRadians(open.value ?-90.0: -10.0),// 俯仰角（-90=垂直向下，0=水平，正值为仰视）
    //         roll: 0.0 // 翻滚角（通常为0）
    //     },
    //     duration: 3.0 // 飞行时间（秒）
    // });
// camera.setView({
//   destination : Cesium.Cartesian3.fromDegrees(lon, lat, height),
//   orientation: {
//     heading: Cesium.Math.toRadians(heading),
//     pitch: Cesium.Math.toRadians(pitch),
//     roll: Cesium.Math.toRadians(roll)
//   }
// }); 
// let center = Cesium.Cartesian3.fromDegrees(longitude,latitude,5000)
   
// vueCesium.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(0.0, -Math.PI / 4, 2000.0));

 
}


</script>
  
<style scoped lang="scss">
  .vc-pitch-control{
    position: absolute;
    z-index: 100;
    .active {
      background: var(--el-color-primary);
      color: #fff;
    }
    
  }
</style>